header {
    .ding {
        background-color: #5485A2;
        width: 10rem;
        height: 1.29rem;
        position: fixed;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;

        .fanhui {
            margin-left: 0.28rem;

            img {
                width: 0.44rem;
            }
        }

        .name {
            display: flex;
            justify-content: center;
            width: 8.85rem;
            font-size: 0.49rem;
            font-family: PingFang;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
}

nav {
    background-color: #fff;

    .banner {
        position: relative;
        width: 10rem;
        height: 7.2rem;

        .tupian {
            img {
                width: 10rem;
                display: block;
            }
        }
    }

    ul {
        position: absolute;
        top: 6.72rem;
        left: 4.39rem;
        display: flex;

        .toumingdu {
            margin-right: 0.12rem;
            width: 0.21rem;
            height: 0.21rem;
            background: #999;
            opacity: 0.8;
            border-radius: 50%;
        }

        li {
            margin-right: 0.12rem;
            width: 0.21rem;
            height: 0.21rem;
            background: #999;
            opacity: 0.3;
            border-radius: 50%;
        }
    }
}

section {
    .shangpinmingc {
        width: 10rem;
        height: 1.73rem;
        background: #FFFFFF;
        border-bottom: 0.01rem solid #E5E5E5;
        border-top: 0.01rem solid #E5E5E5;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .top {
            display: flex;
            margin-left: 0.4rem;
            height: 0.39rem;
            align-items: center;

            .left {
                width: 0.67rem;
                height: 0.4rem;
                line-height: 0.4rem;
                text-align: center;
                background: #69CAA4;
                font-size: 0.24rem;
                font-family: PingFang;
                font-weight: 500;
                color: #FFFFFF;
            }

            .right {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #444444;
                margin-left: 0.08rem;
            }
        }

        .bottom {
            display: flex;
            margin: 0 0.4rem;
            justify-content: space-between;


            .left {
                display: flex;
                align-items: flex-end;

                .l-left {
                    font-size: 0.4rem;
                    font-family: PingFang;
                    font-weight: bold;
                    color: #000000;
                }

                .l-right {
                    font-size: 0.24rem;
                    font-family: PingFang;
                    font-weight: 500;
                    text-decoration: line-through;
                    color: #AAAAAA;
                    margin-left: 0.2rem;
                }
            }

            .right {
                display: flex;
                align-items: flex-end;
                font-size: 0.24rem;
                font-family: PingFang;
                font-weight: 500;
                color: #AAAAAA;
            }
        }
    }

    .guige {
        width: 10rem;
        height: 1.17rem;
        border-bottom: 0.01rem solid #E5E5E5;
        background: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.27rem;

        .left {
            font-size: 0.4rem;
            font-family: PingFang;
            font-weight: 500;
            color: #000000;
            margin-left: 0.44rem;
        }

        .right {
            font-size: 0.4rem;
            font-family: PingFang;
            font-weight: 500;
            color: #B2B2B2;
            display: flex;
            height: 0.37rem;
            align-items: center;

            img {
                width: 0.21rem;
                height: 0.35rem;
                margin-left: 0.27rem;
            }

            margin-right: 0.4rem;
        }
    }

}

section {
    .qiehuan {
        height: 1.17rem;
        background: #FFFFFF;
        display: flex;
        border-top: 0.01rem solid #E5E5E5;
        border-bottom: 0.01rem solid #E5E5E5;

        .one {
            width: 3.33333333333333333333333333rem;
            height: 1.17rem;
            line-height: 1.17rem;
            text-align: center;
            font-size: 0.4rem;
            font-family: PingFang;
            font-weight: 500;
            color: #444444;

            img {
                width: 0.32rem;
            }
        }

        #biankuang {
            border-left: 0.01rem solid #E5E5E5;
            border-right: 0.01rem solid #E5E5E5;
        }

        .xuanzhong {
            font-size: 0.4rem;
            font-family: PingFang;
            font-weight: 500;
            color: #2DA3E8;
        }
    }

    .xiangqing {
        background-color: #fff;

        img {
            width: 10rem;
        }

        padding-bottom: 1.31rem;
    }

    .pingjia {
        width: 10rem;
        height: 1.17rem;
        background: #FFFFFF;

        .zhanwei {
            height: 1.31rem;
        }

        .biank {
            border-bottom: 0.01rem solid #E5E5E5;
            height: 1.17rem;
        }

        ul {
            display: flex;
            justify-content: space-evenly;
            padding-top: 0.31rem;

            li {
                height: 0.53rem;
                line-height: 0.53rem;
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #888888;
                padding: 0 0.16rem;
                background: #EAF2F7;
            }

            .pjbs {
                background: #67B5E3;
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #fff;
            }
        }

        .pingjianeirong {
            background-color: #fff;
            padding: 0 0.4rem;
            height: 6.87rem;
            border-bottom: 0.01rem solid #E5E5E5;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            .pingjiariqi {
                display: flex;
                height: 0.32rem;
                justify-content: space-between;

                .left {
                    font-size: 0.35rem;
                    font-family: PingFang;
                    font-weight: 500;
                    color: #444444;
                }

                .right {
                    font-size: 0.32rem;
                    font-family: PingFang;
                    font-weight: 500;
                    color: #AAAAAA;
                    display: flex;
                }
            }

            .wenzi {
                font-size: 0.32rem;
                font-family: PingFang;
                font-weight: 500;
                color: #888888;
                line-height: 0.43rem;
            }

            .tupian {
                img {
                    width: 2.93rem;
                }
            }

            .goumairiqi {
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #BBBBBB;
            }
        }
    }

    .shouhou {
        background-color: #fff;

        .zhanwei {
            height: 1.31rem;
        }

        .changjia {
            padding: 0 0.4rem;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            .top {
                font-size: 0.35rem;
                font-family: PingFang;
                font-weight: 500;
                color: #444444;
                padding-top: 0.43rem;
            }

            .bottom {
                margin-top: 0.37rem;
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #888888;
                line-height: 0.37rem;
            }
        }

        .chengnuo {
            padding: 0 0.4rem;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            .top {
                margin-top: 0.73rem;
                font-size: 0.35rem;
                font-family: PingFang;
                font-weight: 500;
                color: #444444;
            }

            .bottom {
                margin-top: 0.37rem;
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #888888;
                line-height: 0.37rem;
            }
        }

        .zhengpin {
            padding: 0 0.4rem;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin-top: 0.73rem;

            .top {
                font-size: 0.35rem;
                font-family: PingFang;
                font-weight: 500;
                color: #444444;
                padding-top: 0.37rem;
            }

            .bottom {
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #888888;
                line-height: 0.37rem;

                p {
                    margin-top: 0.37rem;
                }
            }
        }

        .nairuie {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-top: 0.65rem;

            img {
                width: 1.53rem;
            }

            span {
                margin-top: 0.17rem;
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 400;
                color: #AAAAAA;
            }
        }

        .sixin {
            display: flex;
            justify-content: space-evenly;
            margin-top: 0.37rem;

            .one {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 0.93rem;
                }

                span {
                    margin: 0.11rem 0 0.41rem 0;
                    font-size: 0.24rem;
                    font-family: PingFang;
                    font-weight: bold;
                    color: #AAAAAA;
                }
            }
        }
    }
}

.gouwuche {
    position: fixed;

    img {
        width: 1.36rem;
    }

    top: 14.16rem;
    left: 8.29rem;
}

.fanggouwuche {
    height: 8rem;
    width: 10rem;
    position: fixed;
    background-color: #fff;
    bottom: 0;

    .top {
        display: flex;
        border-bottom: 0.01rem solid #EEEEEE;
        padding: 0.4rem;
        position: relative;

        .tupian {
            width: 1.87rem;
            height: 1.87rem;
            background: #FFFFFF;
            border: 0.01px solid #EEEEEE;

            img {
                width: 1.25rem;
                margin: 0.19rem 0 0 0.51rem;
            }
        }

        .wenzi {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 0.32rem;

            .one {
                font-size: 0.45rem;
                font-family: PingFang;
                font-weight: 500;
                color: #444444;
            }

            .two {
                font-size: 0.64rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
            }
        }

        .chahao {
            position: absolute;
            right: 0.4rem;

            img {
                width: 0.49rem;
            }
        }
    }

    .center {
        margin: 0 0.4rem;
        height: 4.15rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .c-top {
            display: flex;
            justify-content: space-between;
            height: 0.6rem;
            align-items: center;

            .left {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #AAAAAA;
            }

            .right {
                .xuanzhong {
                    width: 1.17rem;
                    height: 0.59rem;
                    background: rgba(186, 224, 243, 0.3);
                    border: 0.01px solid #92C7E2;
                    font-size: 0.32rem;
                    font-family: PingFang;
                    font-weight: 500;
                    color: #444444;
                }

                ul {
                    display: flex;
                    line-height: 0.59rem;
                    text-align: center;

                    li {
                        width: 1.17rem;
                        height: 0.59rem;
                        background: rgba(226, 87, 76, 0);
                        border: 0.01px solid #DDDDDD;
                        font-size: 0.32rem;
                        font-family: PingFang;
                        font-weight: 500;
                        color: #AAAAAA;
                        margin-left: 0.13rem;
                    }
                }
            }
        }

        .c-center {
            display: flex;
            justify-content: space-between;
            height: 0.6rem;
            align-items: center;

            .left {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #AAAAAA;
            }

            .right {
                .xianshi {
                    width: 0.8rem;
                    height: 0.59rem;
                    background: rgba(226, 87, 76, 0);
                    border: 0.01px solid #DDDDDD;
                    font-size: 0.32rem;
                    font-family: PingFang;
                    font-weight: 500;
                    color: #444444;
                }

                ul {
                    display: flex;
                    line-height: 0.59rem;
                    text-align: center;

                    li {
                        width: 0.59rem;
                        height: 0.59rem;
                        background: rgba(226, 87, 76, 0);
                        border: 0.01px solid #DDDDDD;
                        font-size: 0.32rem;
                        font-family: PingFang;
                        font-weight: 500;
                        color: #AAAAAA;
                    }
                }
            }
        }

        .c-bottom {
            display: flex;
            justify-content: space-between;
            height: 0.6rem;
            align-items: center;

            .left {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #AAAAAA;
            }

            .right {
                .xuanzhong {
                    border: 0.03px solid #262829;
                }

                ul {
                    display: flex;
                    line-height: 0.59rem;
                    text-align: center;

                    .yanse {
                        background: #8EE6F9;
                    }

                    .yanse2 {
                        background: #FCD59C;
                    }

                    .yanse3 {
                        background: #F9ADB4;
                    }

                    .yanse4 {
                        background: #C8AEF9;
                    }

                    li {
                        width: 0.53rem;
                        height: 0.53rem;
                        border-radius: 50%;
                        margin-left: 0.23rem;
                    }
                }
            }
        }
    }

    .bottom {
        width: 10rem;
        height: 1.17rem;
        line-height: 1.17rem;
        background: #5293BA;
        font-size: 0.48rem;
        font-family: PingFang;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
    }
}

footer {
    .di {
        width: 10rem;
        height: 1.31rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background: #fff;
        position: fixed;
        bottom: 0;
        border-top: 0.01rem solid #dddddd;
        text-align: center;

        .one {
            display: flex;
            width: 3.33333333333333333333333333333333333333333333333333rem;
            height: 1.31rem;
            justify-content: space-evenly;
            align-items: center;

            .left {

                img {
                    width: 0.48rem;
                }
            }

            .right {
                img {
                    width: 0.49rem;
                }
            }

            span {
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #FFFFFF;
                opacity: 0.5;
                display: block;
            }

            background: #232B30;
        }

        .two {
            background: #164f6f;
            width: 3.33333333333333333333333333333333333333333333333333333rem;
            height: 1.31rem;
            line-height: 1.31rem;

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #FFFFFF;
            }
        }

        .three {
            background: #5293BA;
            width: 3.3333333333333333333333333333333333333333333333333333333333333rem;
            height: 1.31rem;
            line-height: 1.31rem;

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
    }
}